<template>
<div class="box box-primary videos">
  <div class="box-header">
    <h4 class="text-primary text-center">桌面直播列表</h4>
  </div>
  <div class="box-body">
    <el-table :row-class-name="tableRowClassName" ref="recordTable" :data="pageData" :default-sort="{prop: 'startAt', order: 'descending'}" @sort-change="sortChange">
      <el-table-column min-width="200" label="Id" prop="Id"></el-table-column>
      <el-table-column min-width="120" label="Application" prop="Application" show-overflow-tooltip></el-table-column>
      <el-table-column min-width="120" label="在线人数" prop="NumOutputs" :formatter="formatNumOutputs"></el-table-column>
      <el-table-column min-width="120" label="推送码率" prop="InBitrate" :formatter="formatInBitrate"></el-table-column>
      <el-table-column min-width="120" label="推送流量" prop="InBytes" :formatter="formatInBytes"></el-table-column>
      <el-table-column min-width="120" label="直播时长" prop="Time" :formatter="formatTime"></el-table-column>
      <el-table-column min-width="250" label="操作" fixed="right">
        <template slot-scope="scope">
          <div class="btn-group">
            <!-- <a role="button" class="btn btn-primary btn-xs" @click.prevent="playHLS(scope.row)"><i class='fa fa-play'></i> HLS</a> -->
            <a role="button" class="btn btn-primary btn-xs" @click.prevent="playFLV(scope.row)"><i class='fa fa-play'></i> HTTP-FLV</a>
            <a role="button" class="btn btn-primary btn-xs" @click.prevent="playRTMP(scope.row)"><i class='fa fa-play'></i> RTMP</a>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="box-footer clearfix" v-if="total > 0">
    <el-pagination layout="prev,pager,next" class="pull-right" :total="total" :page-size.sync="pageSize" :current-page.sync="currentPage"></el-pagination>
  </div>
</div>
</template>

<script>
import {
  mapState
} from "vuex";
import moment from "moment";
import DatePicker from "components/DatePicker.vue";
import axios from "axios";
import prettyBytes from 'pretty-bytes'
import _ from 'lodash'

export default {
  props: {
    id: "",
    day: ""
  },
  data() {
    return {
      name: "",
      bDownloading: false,
      currentPage: 1,
      pageSize: 10,
      sort: "startAt",
      order: "ascending",
      videos: [],
      timer: 0,
      bgcolor: "",
      pathname: location.pathname == "/" ? "" : location.pathname.substring(0, location.pathname.length - 1),
      playHost: `${location.protocol}//${location.host.split(":")[0]}:10100`
    };
  },
  components: {
    DatePicker
  },
  methods: {
    tableRowClassName({
      row,
      rowIndex
    }) {
    },
    isMobile() {
      return videojs.browser.IS_IOS || videojs.browser.IS_ANDROID;
    },
    showDatePicker() {
      $(this.$refs.datePicker.$el).focus();
    },
    updateVideos() {
      $.get(this.playHost + "/getlivesessions", {}).then(data => {
        if (data && (data.LiveQing || data.NVR) && (data.LiveQing || data.NVR).Body && (data.LiveQing || data.NVR).Body.Sessions && (data.LiveQing || data.NVR).Body.Sessions.Sessions) {
          var newLives = [];
          (data.LiveQing || data.NVR).Body.Sessions.Sessions.map(row => {
            if (row.Application == "pc") {
              newLives.push(row)
            }
          });
          this.videos = newLives;
        }
      });
    },
    updateVideosDebounce: _.debounce(function () {
      this.updateVideos()
    }, 500),
    playHLS(row) {
      var url = this.playHost + row.HLS
      this.$emit("play", {
        videoUrl: url,
        videoTitle: `${url}`
      });
    },
    playFLV(row) {
      var url = this.playHost + row["HTTP-FLV"]
      this.$emit("play", {
        videoUrl: url,
        videoTitle: `${url}`
      });
    },
    playRTMP(row) {
      var url = row.RTMP
      this.$emit("play", {
        videoUrl: url,
        videoTitle: `${url}`
      });
    },
    sortChange(data) {
      this.sort = data.prop;
      this.order = data.order;
      this.updateVideos();
    },
    formatInBitrate(row, col, val) {
      if (val == undefined) return '-';
      return prettyBytes(val) + "/s";
    },
    formatInBytes(row, col, val) {
      if (val == undefined) return '-';
      return prettyBytes(val);
    },
    formatNumOutputs(row, col, val) {
      if (val == undefined) return '-';
      return val;
    },
    formatTime(row, col, val) {
      if (val == undefined) return '-';
      return val;
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = 0;
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.updateVideos();
    }, 3000);
    this.updateVideos();
  },
  computed: {
    ...mapState(["userInfo"]),
    total() {
      return this.videos.length;
    },
    pageData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      return this.videos.slice(start, end).map(row => {
        return row;
      });
    }
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.$nextTick(() => {
      this.updateVideos();
    });
  }
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
  color: red;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
